<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        .cart-container {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
            padding: 30px;
            margin-top: 30px;
        }
        .cart-header {
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .cart-title {
            color: #333;
            font-weight: 600;
            margin: 0;
            display: flex;
            align-items: center;
        }
        .cart-title i {
            margin-right: 10px;
            color: #007bff;
        }
        .empty-cart {
            text-align: center;
            padding: 50px 0;
        }
        .empty-cart i {
            font-size: 50px;
            color: #ccc;
            margin-bottom: 20px;
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .book-name {
            font-weight: 500;
            color: #007bff;
        }
        .price {
            color: #dc3545;
            font-weight: 500;
        }
        .btn-remove {
            padding: 5px 15px;
            border-radius: 20px;
        }
        .cart-footer {
            border-top: 2px solid #eee;
            padding-top: 20px;
            margin-top: 30px;
        }
        .total-price {
            font-size: 24px;
            color: #dc3545;
            font-weight: 600;
        }
        .btn-checkout {
            padding: 10px 30px;
            border-radius: 25px;
            font-weight: 500;
        }
        .continue-shopping {
            color: #6c757d;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin-top: 20px;
        }
        .continue-shopping i {
            margin-right: 5px;
        }
    </style>
</head>
<body class="bg-light">
<div class="container">
    <div class="cart-container">
        <div class="cart-header">
            <h2 class="cart-title">
                <i class="fas fa-shopping-cart"></i>
                我的购物车
            </h2>
        </div>

        <c:choose>
            <c:when test="${empty transactions}">
                <div class="empty-cart">
                    <i class="fas fa-shopping-cart"></i>
                    <h3>购物车是空的</h3>
                    <p class="text-muted">快去添加一些好书吧！</p>
                    <a href="${pageContext.request.contextPath}/index.jsp" class="btn btn-primary">
                        <i class="fas fa-arrow-left"></i> 继续购物
                    </a>
                </div>
            </c:when>
            <c:otherwise>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>图书信息</th>
                            <th>单价</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${transactions}" var="transaction">
                            <tr>
                                <td>
                                    <span class="book-name">${transaction.bookName}</span>
                                </td>
                                <td>
                                    <span class="price">￥${transaction.transactionPrice}</span>
                                </td>
                                <td>
                                    <form action="${pageContext.request.contextPath}/cart/remove"
                                          method="post"
                                          style="display: inline;"
                                          onsubmit="return confirm('确定要删除这本书吗？')">
                                        <input type="hidden" name="id" value="${transaction.id}">
                                        <button type="submit" class="btn btn-outline-danger btn-remove">
                                            <i class="fas fa-trash-alt"></i> 删除
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>

                <div class="cart-footer">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <a href="${pageContext.request.contextPath}/index.jsp" class="continue-shopping">
                                <i class="fas fa-arrow-left"></i> 继续购物
                            </a>
                        </div>
                        <div class="col-md-6 text-end">
                            <div class="mb-3">
                                <span class="h5">总计: </span>
                                <span class="total-price">￥${total}</span>
                            </div>
                            <form action="${pageContext.request.contextPath}/cart/checkout"
                                  method="post"
                                  style="display: inline;">
                                <button type="submit" class="btn btn-primary btn-checkout">
                                    <i class="fas fa-check"></i> 结算
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </c:otherwise>
        </c:choose>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>